<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

ul{
    list-style: none;

}
li{
    float: left;
    margin-left: 20px;
}
.box{
    background-color: red;
    width: 40px;
    height: 40px;
  
}
.box1{
    background-color: lawngreen;
    width: 40px;
    height: 40px;
  
}
.box2{
    background-color: purple;
    width: 40px;
    height: 40px;
  
}
p{
        background-color:#f8f8f8;
        width: 20px;
        height: 20px;
margin: auto;
    }
    #box0{
    height: 1000px;
        background-color: red;
    }
    #box5{
    height: 1000px;
        background-color:lawngreen ;
    }
    #box6{
    height: 1000px;
        background-color:#000000 ;
    }
  
    </style>
</head>
<body>
  
   <ul>
       <li class="box" onclick="red()"> <p></p></li>
       <li class="box1" onclick="lse()"> <p></p></li>
       <li class="box2" onclick="hse()"> <p></p></li>
   </ul>
   <br>
       <ul>
           <li class="box">
               新闻
           </li>
           <li class="box">
               娱乐
           </li>
           <li>
               体育
           </li>
           <li class="box">
               电影
           </li>
       </ul> 
  <div id="box5"></div>
  <div id="box6"></div>
  <div id="box7"></div>
</body>
</html>
<script>
    var add = document.getElementById("box0");
    var add1 = document.getElementById("box5");
    var add2 = document.getElementById("box6");

function red(){
    add.style.backgroundColor="#red"
}
function lse(){
add1.style.backgroundColor="#lawngreen"
}
function hse(){
add1.style.backgroundColor="#000000"
}
</script>